<template>
	<view class="wallet-page">
		<view class="wallet-content">
			<view class="wallet-assets">
				<view class="wallet-header">
					<view class="num">{{ balanceInfo.totalAmount / 100 || '0.00' }}</view>
					<view
						class="tips"
						@click="walletTotal"
					>
						<text>钱包总额(元)</text>
						<image class="icon-wallet" src="@/static/images/icon_wallet_more.png"></image>
					</view>
				</view>
				<view class="wallet-body">
					<view class="can-withdraw">
						<view class="withdraw-money">
							<view class="money-assets">{{ balanceInfo.withdrawAbleAmount / 100 || '0.00' }}</view>
							<view class="money-text">可提现金额</view>
						</view>
						<view class="withdraw-btn">
							<text>提现</text>
						</view>
					</view>
					<view class="no-withdraw">
						<view class="withdraw-money">
							<view class="money-assets">{{ balanceInfo.freezingAmount / 100 || '0.00' }}</view>
							<view class="money-text">冻结金额</view>
						</view>
					</view>
				</view>
			</view>
			<view
				class="wallet-cell"
				@click="waitMoney"
			>
				<image class="icon-cell" src="@/static/images/icon_wallet_waiting.png"></image>
				<view class="cell-body">
					<view class="cell-content">
						<text>待入账金额：</text>
						<text class="red">¥{{ balanceInfo.accountedAmount / 100 || '0.00' }}</text>
					</view>
					<image class="icon-more" src="@/static/images/icon_gray_more.png"></image>
				</view>
			</view>
		</view>
		<hsb-common-base-confirm
			ref="baseConfirmComp"
			title="待入账金额"
			content="回收订单下单后，所估价价格将会计入待入账金额，议价完成后将会转入可提现金额。"
			:showCancel="false"
			confirmText="我知道了"
		/>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			balanceInfo: state => state.user.balanceInfo,
		})
	},
	methods: {
		waitMoney () {
			this.$refs.baseConfirmComp.open()
		},
		walletTotal () {
			this.$store.dispatch('openPage', {
				redirectUrl: 'https://mobile.huishoubao.com/mobile/m/walletExplain.html'
			})
		}
	},
	onLoad () {
		this.$store.dispatch('user/getBalanceInfo')
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
